<template>
	<uv-popup ref="popupRef" :round='15' :safeAreaInsetBottom='false' @change="change">
		<div class="input-popup">
			<div class="title">
				<span>请输入{{title}}</span>
			</div>
			<div class="content">
				<input :placeholder="'请输入' + title" :type="type" confirmType='done' v-model="value" @confirm='confirm'></input>
			</div>
			<div class="btns">
				<div class="btn-item">
					<uv-button text="取消" shape='circle' plain @click="close"></uv-button>
				</div>
				<div class="btn-item">
					<uv-button type='primary' text="确认" shape='circle' @click='confirm'></uv-button>
				</div>
			</div>
		</div>
	</uv-popup>
</template>

<script setup>
	import { ref, onMounted, nextTick } from 'vue';

	const props = defineProps({
		title: {
			type: String,
			default: '内容'
		},
		type: {
			type: String,
			default: 'text'
		}
	})

	const emits = defineEmits(['change', 'confirm']);

	const value = ref('');
	const popupRef = ref(null);

	function confirm() {
		close();
		emits('confirm', value.value)
	}

	function open(val) {
		nextTick(() => {
			val && (value.value = val);
			popupRef.value && popupRef.value.open();
		})
	}

	function close() {
		nextTick(() => {
			popupRef.value && popupRef.value.close();
		})
	}

	function change(e) {
		emits('change', e.show)
		if (!e.show) {
			value.value = '';
		}
	}

	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.input-popup {
		width: 600rpx;
		box-sizing: border-box;
		padding: 40rpx;

		.title {
			font-weight: 600;
			text-align: center;
			font-size: 32rpx;
		}

		.content {
			margin-top: 40rpx;
			background: $search-color;
			height: 85rpx;
			border-radius: 36px;

			input {
				height: 85rpx;
				line-height: 85rpx;
				font-size: 30rpx;
				padding: 0 30rpx;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 70rpx;

			.btn-item {
				flex: 0.45;
			}
		}
	}
</style>